//jsx = javascript + xml 是facebook发明的语法
//浏览器肯定是不能识别这种语法，需要babel进行编译
//jsx是用来给组件提供视图模块
// let box = (
//     <div>
//         <h1>hello React</h1>
//     </div>
// )
// //react中组件名必须大写 DemoA是组件的名字
// function DemoA(){
//     return box; //函数式组件，需要返回一个jsx元素
// }


// --------------------------------------
// import React from 'react'
// function DemoA(){
//     return React.createElement(
//         'div',
//         {key:1},
//         [
//             React.createElement('h1',{key:2},['Hello React 666'])
//         ]
//     )
// }
// --------------------------------------
// import React  from "react"
// let box =(
//     <div className="box" title="haha">
//         <span>我是span</span>
//         <a href="http://baidu.com">百度</a>
//     </div>
// )
// function DemoA(){
//     return React.createElement(
//         'div',
//         {className:'box',title:'haha'},
//         [
//            React.createElement('span',{key:1},'我是span'),
//             React.createElement('a',{href:'http://baidu.com',key:2},'码路'),

//         ]
//     )
// }
// --------------------------------------
// import React from "react"
// //view是一个对象，这个对象叫jsx元素
// //说到jsx元素，本质就是一个对象，是 React.createElement函数调用后的结果
// //之前说的那一片html+js代码，也叫jsx元素，但是仅仅是一个语法糖
// let view =  React.createElement(
//     'div',
//     {className:'box',title:'haha'},
//     [
//         React.cloneElement('span',{key:1},'我是span'),
//         React.cloneElement('a',{href:'http://baidu.com',key:2},'码路'),

//     ]
// )
// function DemoA(){
//     return view
// }
// --------------------------------------
// import React from "react"
// let a = (<div>我是一个孤独的div</div> )
// let b = React.createElement(
//     'div',
//     {},
//     ['我是一个div']
// )
// console.log(a);
// console.log(b);
// function DemoA(){
//     return a
// }

// --------------------------------------
// import React from "react"
// //element是一个jsx元素，本质是一个对象，这个对象是不可变的说白了，就是不能对 其中的属性进行操作
// let element = ( <div>我是一个孤独的div</div> )
// element.name ='wc'//添加属性
// element.key = 110//修改属性
// delete element.key//删除属性
// console.log(element);
// function DemoA(){
//     return element
// }
// jsx元素，由jsx语法糖或React.createElement返回的结果叫jsx元素，本质是一个对象，通常充当组件的视图模板
//组件，由class或function定义的才叫组件，一个组件中通常是有一个jsx视图模块。组件名必须大写
// --------------------------------------
// import React from "react"
// let a =110;
// function foo(user){
//     return   ` ${user.firstName} ${user.lastName}`
// }
// function DemoA(){
//     return (
//         <div>
//            {/* {}放表达式，只要是值都可以放在{}中 */}
//            <h3>{110+a}</h3>
//            <h3>{`${a}+110`}</h3>
//            <h3>{foo({firstName:'wang',lastName:'cai'})}</h3>
//         </div>
//     )
// }
// --------------------------------------
//  import React  from "react"
//  function foo(arg){
//     if(arg){
//         return <div>{arg}</div>
//     }else{
//         //一个普通函数也可以返回jsx
//         return <div>我是默认值</div>
//     }
//  }
//  let ele = <strong>我是span</strong>
//  function DemoA(){
//     return (
//         <div>
//             <h3>{foo(110)}</h3>
//             <h3>{foo()}</h3>
//             <h3>{foo('hello')}</h3>
//             <h3>{foo( <span>我是span</span> )}</h3>
//             <h3>{foo(ele)}</h3>
//         </div>
//     )
//  }
//  //总结
//    //jsx可以作为函数的入参，说白了，就是把一个jsx传递给一个函数
//    //jsx也可以作为函数的返回值，一个函数也可以返回一个jsx

// --------------------------------------
// let ele = '<div> <a href="http://baidu.com">百度</a></div>'
// function DemoA(){
//     return(
//         <div>
//             {ele}
//             <hr />
//             <div dangerouslySetInnerHTML={{__html:ele}}></div>
//         </div>
//     )
// }
// --------------------------------------

// import React,{Fragment} from "react"
// function DemoA(){
//     return (
//         // <div>
//         //     <div>我是一个div</div>
//         //     <div>我是一个div</div>
//         //     <div>我是一个div</div>
//         // </div>
//         // <Fragment>
//         //     <div>我是一个div</div>
//         //     <div>我是一个div</div>
//         //     <div>我是一个div</div>
//         // </Fragment>
//         <>
//                <div>我是一个div</div>
//              <div>我是一个div</div>
//              <div>我是一个div</div>
//         </>
//     )
// }

// --------------------------------------

// import React,{Fragment} from "react"
// function DemoA(){
//     return (
//         <>
//          {/* 在jsx中写style,style的值必须是一个对象，对象必须放到{} */}
//         <div style={{border: '9px solid red', height: '100px'}}></div>
//         </>
//     )
// }
// --------------------------------------
// let a = 'box1'
// let b = "box2"
// function DemoA(){
//     return(
//        <div>
//          <div className="box"></div>
//          <div className={a}></div>
//          <div className={`${a} box110 ${b}`}></div>
//          {/* 两个都是静态的，会发生覆盖 */}
//          <div className="box" className="box2"></div>
//          <div className="box" className={a}></div>
//        </div>
       
//     )
// }
// --------------------------------------
//demob 仅仅是一个函数，只能通过demob()进行函数调用，不能当成组件
// function deemob(){
//     return (
//         <div>我是demob组件</div>
//     )
// }
// function DemoA(){
//     return (
//         <div>
//             <deemob></deemob>
//         </div>
//     )
// }

// --------------------------------------

// const M1 = {
//     Button(){
//         return (
//             <button>点我</button>
//         )
//     },
//     Form(){
//         return <div>Form组件</div>
//     }
// }
// function DemoA(){
//     let {Button,Form} =M1
//     return (
//         <div>
//             <Button></Button>
//             <Form></Form>
//         </div>
//     )
// }
// --------------------------------------
// function Child(props){
//     let {name,age,address} = props;
//     return (
//         <div>
//             我是子组件：{name}  ---{age} --{address}
//         </div>
//     )
// }
// function DemoA(){
//     let data = {
//         name:'wc',
//         age:18,
//         addres:'bj'
//     }
//     return (
//         <div>
//             <Child {...data}></Child>
//         </div>
//     )
// }

// --------------------------------------

// function Child(props){
//     let {name,age,address,...other} = props;
//     console.log(other);
//     return (
//         <div>
//             我是子组件：{name}  ---{age} --{address}
//         </div>
//     )
// }
// function DemoA(){
//     let data = {
//         name:'wc',
//         age:18,
//         addres:'bj',
//         list:['a','b','c'],
//         info:{
//             a:1,
//             b:2
//         },
//         fn:()=>{console.log('fn');},
//         header:( <div>我是头部</div> ),
//         id:Symbol(1)
//     }
//     return (
//         <div>
//              {/* <Child name={data.name} age={data.age} address={data.address}></Child> */}
//             <Child {...data}></Child>
//         </div>
//     )
// }
// --------------------------------------
// function Child(props){
//    let {children} = props

//     return (
//         <div>
//           <h2>我是子组件</h2>
//           <h3>{children()}</h3>
//         </div>
//     )
// }
// function DemoA(){
   
//     return (
//         <div>
//            <Child>你好</Child>
//            <Child>{true}</Child>
//            <Child> <div>hello</div> </Child>
//            <Child><div>Hello React~</div><span>hello span</span></Child>
//            <Child><div><div>Hello React~</div><span>hello span</span></div></Child>
//            <Child>{() => { return 110 }}</Child>
//            <Child>{() => { return (<div>220</div>) }}</Child>
//            <Child>{() => (<div>220</div>)}</Child>
            
//         </div>
//     )
// }

// --------------------------------------
// function DemoA(){
//     return (
//         <div>
//             <div>{['a','c','b']}</div>
//             <div>{["a", true, null, undefined, ['bb'], (<div>我是一个div</div>)]}</div>
//         </div>
//     )
// }






































































export default DemoA